import { memo } from 'react'
import { useRoutes, Navigate, useLocation } from 'react-router-dom'
import styled from 'styled-components'
import Discover from '@/pages/Discover'
import Recommended from '@/pages/Discover/recommended'
import PlayListDetails from '../../pages/PlayListDetails'
import NotFoundPage404 from '../../pages/NotFoundPage404'
import { CSSTransition,SwitchTransition, } from 'react-transition-group'
const ContentContainer = styled.div.attrs((props) => {
	return props.theme
})`
	flex:1;
	color: ${(props) => props.textColor};
	overflow-y: scroll;
	background-color: ${(props) => props.contentBackgroundColor};
	/* background-color: #eee; */
	height: calc(100vh - ${(props) => props.headerHeight});
	box-sizing: border-box;
	padding-bottom: 1.5rem;
`
/**
 * AppRoutes 路由配置
 * @returns
 */
function AppRoutes() {
	const routes = [
		{
			path: '/',
			element: <Navigate to="/discover" />, //重定向
		},
		{
			path: '/discover',
			element: <Discover />,
			children: [
				{
					path: '', //重定向路由！
					element: <Navigate to="recommended" replace />,
				},
				{
					path: 'recommended', //默认匹配！
					element: <Recommended />,
				},
				{
					path: 'rank',
					element: <div>rank</div>,
				},
				{
					path: 'playListDetails/:playListId',
					element: <PlayListDetails />,
				},
				{
					path: '*',
					element: <NotFoundPage404 />,
				},
			],
		},
		{
			path: '/re',
			element: <div>reeee</div>,
		},
		{
			path: '*',
			element: <NotFoundPage404 />,
		},
	]
	return useRoutes(routes)
}
const MyCSSTransition = styled(CSSTransition)`
	transition: all 300ms ease-out;
	width:100%;
	&.fade-enter {
		transform:translate(-3000px) ;
	}
	&.fade-enter.fade-enter-active {
		transform:translate(0px) ;
	}
	&.fade-exit {
		transform:translate(0px) ;
	}
	&.fade-exit.fade-exit-active {
		transform:translate(-3000px) ;
	}
`
export default memo(function AppContent() {
	console.log('AppContent render')
	const pathName = useLocation().pathname
	const location = useLocation()
	return (
		// <SwitchTransition mode={'out-in'} component={null} >
		// 	<MyCSSTransition  classNames="fade" timeout={300} key={location.key}>
				<ContentContainer className="ContentContainer">
					{/* {pathName} */}
					<AppRoutes location={location} />
					{/* <BreadCrumbs/> */}
					{/* <Routes>
						<Route path="/" element={<Home />}></Route>
					</Routes> */}
				</ContentContainer>
		// 	</MyCSSTransition>
		// </SwitchTransition>
	)
})
